/**
 * Created by zhouli on 18/3/19
 * Email li.zhou@huilianyi.com
 */
//我发现importer组件并不能满足我这边的需求
//1.importer是文件上传与导入错误信息在一起的组件,我要分开导入是导入，显示错误是显示错误的
//2.importer弹窗的布局是固定的那个形式，不满足这边弹窗样式

import React from 'react';
import {connect} from 'react-redux';
import {Modal, Button, Tabs, Progress, Icon, Table,Popover} from 'antd';
import {messages} from "share/common";
import ImportModalService from './import-modal.service'

//数据导入组件之后显示错误信息的弹窗
//只用来显示：错误数据需要外部传入

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      errorData: "",
      errorColumns: [
        {
          title: messages('common-1.key371')/*行号*/,
          dataIndex: 'line',
        },
        {
          title: messages('common-1.key372')/*错误信息*/,
          dataIndex: 'msg',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        }
      ],
      colErrColumns: [
        {
          title: messages('common-1.key371')/*行号*/,
          dataIndex: 'lineNumber',
        },
        {
          title: messages('common-1.key372')/*错误信息*/,
          dataIndex: 'errorMessage',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        }
      ],
      pagination: {
        total: 0,
      },
      page: 0,
      loading: false,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      visible: nextProps.visible,
    });
    if(nextProps.oneColOneErr){
      this.getTableData();
    }else{
      this.setState({
        errorData: nextProps.errorsList,
      });
    }
  }

  componentWillMount() {
    if(this.props.oneColOneErr && this.props.oneColOneErrParams){
      this.getTableData();
    }else{
      this.setState({
        errorData: this.props.errorsList,
      });
    }
    this.setState({
      visible: this.props.visible,
    })
  }

  exportErrInfo = () => {
    this.props.exportErrInfo()
  };

  hideImportErrInfo = () => {
    this.setState({
      visible: false,
    })
    if (this.props.cancel) {
      this.props.cancel()
    }
  }
  renderProgress = () => {
    if (this.props.progress > 0 && this.props.progress < 100) {
      return (
        <Progress percent={this.props.progress} status="active"/>
      )
    }
    else {
      return (
        <div><br/></div>
      )
    }
  }

  renderExportBtn = () => {
    if(this.props.exportBtn){
      return(
        <Button onClick={this.exportErrInfo} loading={this.props.exportLoading}>
          {messages('common-1.key373')/*导出错误信息*/}
        </Button>
      )
    }else {
        return null;
    }
  };

  //获取映射关系
  getTableData = () => {
    let {showErrUrl, transactionOID} = this.props.oneColOneErrParams;
    this.setState({
      loading: true,
    });
    ImportModalService.checkError(showErrUrl, transactionOID, this.state.page)
      .then(res => {
        let data = res.data.detailPage;
        this.setState({
          errorData: data.content,
          loading: false,
          pagination: {
            total: data.totalElements,
            current: this.state.page + 1,
            onChange: this.onChangePaper,
          }
        })
      }
    ).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };


  //点击分页
  onChangePaper = (page) => {
    if (page - 1 !== this.state.page) {
      this.setState({
          page: page - 1,
        }, () => {
          this.getTableData();
        }
      )
    }
  };
  render() {
    const {pagination, loading, visible, errorColumns, errorData, colErrColumns} = this.state;
    const {oneColOneErr, progress,} = this.props;
    //todo
    //针对没有错误信息的时候，还需要对界面进行处理
    return (
      <div className="import-err-info-modal-wrap">
        <Modal
          closable
          width={800}
          className="import-err-info-modal"
          title={messages('common-1.key374')/*导入错误信息*/}
          visible={visible}
          footer={
            <Button onClick={this.hideImportErrInfo} disabled={JSON.stringify(progress) === 'null'}>
              {messages('common.ok')/*确定*/}
            </Button>
          }
          onCancel={this.hideImportErrInfo}
          destroyOnClose={true}
        >
          {this.renderExportBtn()}
          {this.renderProgress()}
          <Table rowKey={record => record.lineNumber}
                 columns={oneColOneErr ? colErrColumns : errorColumns}
                 dataSource={errorData}
                 pagination={oneColOneErr ? pagination : {}}
                 bordered
                 loading={JSON.stringify(progress) === 'null' || loading}
          />
        </Modal>
      </div>
    );
  }
}

Index.propTypes = {
  progress: React.PropTypes.number,//进度条 百分比 传入0--100
  visible: React.PropTypes.bool.isRequired,           //导入错误弹框是否可见
  title: React.PropTypes.string,   //标题
  exportErrInfo: React.PropTypes.func,//点击导出错误信息的回调
  cancel: React.PropTypes.func,//点击关闭的回调函数
  errorsList: React.PropTypes.array.isRequired,    //错误信息
  exportBtn: React.PropTypes.any,//导出错误信息的按钮
  exportLoading: React.PropTypes.bool,//导出错误信息的按钮的loading
  oneColOneErr: React.PropTypes.bool,//导出的错误信息是否是一行号对应一错误信息
  oneColOneErrParams: React.PropTypes.object//导出的错误信息是否是一行号对应一错误信息
};

Index.defaultProps = {
  exportBtn: true,
  exportLoading: false,
  oneColOneErr: false,
  title: messages('common-1.key372')/*错误信息*/};

function mapStateToProps() {
  return {}
}

export default connect(mapStateToProps)(Index);
